<script lang="ts" setup>
import { ref, watchEffect } from 'vue'
import PostList from '@/components/PostList.vue'
import UserList from '@/components/UserList.vue'
import PictureList from '@/components/PictureList.vue'
import { useRoute, useRouter } from 'vue-router'
import { getTest } from '@/api/index'

const router = useRouter()
const route = useRoute()

const initialSearchQuery = {
	text: '',
	pageNum: 1,
	pageSize: 10
}

const searchQuery = ref(initialSearchQuery)

watchEffect(() => {
	searchQuery.value = {
		...initialSearchQuery,
		text: route.query.text
	} as any
})

const postList = ref([])
const getPostList = async () => {
	const res = await getTest()
	postList.value = res.records
}
getPostList()
const onSearch = () => {
	router.push({
		query: searchQuery.value
	})
}

const activeKey = ref(route.params.category as string)

const changeTab = (key: string) => {
	router.push({
		params: {
			category: key
		},
		query: searchQuery.value
	})
}
</script>

<template>
	<div class="container">
		<a-input-search class="input" v-model:value="searchQuery.text" placeholder="请输入搜索内容" size="large" @search="onSearch">
			<template #enterButton>
				<a-button type="primary">搜索</a-button>
			</template>
		</a-input-search>
		<a-tabs v-model:activeKey="activeKey" @change="changeTab">
			<a-tab-pane key="post" tab="文章">
				<post-list :postList="postList" />
			</a-tab-pane>
			<a-tab-pane key="user" tab="用户">
				<user-list />
			</a-tab-pane>
			<a-tab-pane key="picture" tab="图片">
				<picture-list />
			</a-tab-pane>
		</a-tabs>
	</div>
</template>

<style scoped>
.container {
	margin: 20px auto;
	padding: 20px;
	width: 60%;
}
.input {
	margin-bottom: 20px;
}
</style>
